<template>
  <div class="edit_main1">
    <head-top head-title="业主认证" goBack="true"></head-top>
    <ul>
      <li class="li_li border-bottom">
        <span>真实姓名:</span>
        <!--<span style="color: red">*</span>-->
        <input type="text" placeholder="请输入真实姓名" v-model.trim="realName">
      </li>
      <!-- <li class="li_li border-bottom">
        <span>我的昵称：</span>
        <input type="text" placeholder="请输入昵称" v-model.trim="name">
      </li> -->
     <!-- <li class="li_li border-bottom" @click="selectedSex">
        <span>我的性别:</span>
        <span class="span-color" v-show="sexValue === 'Female'">女</span>
        <span class="span-color" v-show="sexValue === 'Male'">男</span>
        <span class="span-color" v-show="sexValue === 'Secret'">保密</span>
        <img src="../home/images/fanhui1@2x.png" alt="">

      </li>-->
      <div class="mypopup">
        <mt-popup
          v-model="showSex"
          popup-transition="popup-fade">
          <div class="mysex" @click="sexValueData">
            <mt-radio
              v-model="sexValue"
              :options="sex">
            </mt-radio>
          </div>
        </mt-popup>
      </div>
      <li class="li_li border-bottom" @click="selectedIdentity">
        <span>我的身份:</span>
        <span class="span-color" v-show="identityValue === 'User'">业主</span>
        <span class="span-color" v-show="identityValue === 'Work'">员工</span>
        <span class="span-color" v-show="identityValue === 'UserWork'">既是业主也是员工</span>
        <img src="../home/images/fanhui1@2x.png" alt="">
      </li>
      <div class="mypopup">
        <mt-popup
          v-model="showIdentity"
          popup-transition="popup-fade">
          <div class="myidentity">
            <!--<mt-radio
              v-model="identityValue"
              :options="identity">
            </mt-radio>-->
            <div class="ident_ul">
              <div class="ident_title">身份类型</div>
              <div class="ident_li" v-for="(item,index) in identity" :key="index">
                <div class="ident_btn" :class="(identityValue === item.value)?'chocebtn':''" @click="selectIdent(item.value)">{{item.label}}</div>
              </div>
            </div>
          </div>
        </mt-popup>
      </div>
      <li class="li_li border-bottom" @click="goMyVillage">
        <span>我的小区:</span>
        <!--<span style="color: red">*</span>-->
        <span class="span-color">{{village}}</span>
        <img src="../home/images/fanhui1@2x.png" alt="">
      </li>
      <li class="li_li border-bottom">
        <span>手机号码:</span>
        <!--<span style="color: red">*</span>-->
        <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model.trim="phoneNumber" autocomplete="on"
               @keyup="editPhone">
      </li>
      <li class="li_li border-bottom teshu" v-show="showCode">
        <span>验 证 码&nbsp;:</span>
        <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="codeNumber" maxlength="4">
        <div class="btn">
          <mt-button @click="getCode" type="primary" :disabled="time ==0 || time==60 ? false : true ">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </mt-button>
        </div>
      </li>
     <!-- <li class="li_li border-bottom">
        <span>我的邮箱:</span>
        <input type="email" placeholder="请输入邮箱" v-model="email">
      </li>-->
    </ul>
   <!-- <div class="notice" style="color: red; padding-left: 10px;margin-top: 10px;">
      <span>注意：打 * 为必填资料</span>
    </div>-->
    <div class="btn_row">
      <button class="buttonbg" :class="[dis === true ? 'disabled':'']" @click="submitAll">
        <span>保存</span>
      </button>
    </div>
    <mt-popup
      v-model="villageShow"
      popup-transition="popup-fade" class="villageHeights">
      <div class="village">
        <p class="p border-bottom">请选择小区</p>
        <div class="plot-wrapper">
          <div class="search">
            <div class="search-wrapper">
              <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">
              <span class="search-icon" @click="search"></span>
            </div>
          </div>
        </div>
      </div>
      <mt-index-list>
        <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
          <div v-for="(list,index) in item" @click="goVillage(list)">
            <mt-cell :title="list.title"></mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </mt-popup>
    <!--授权认证书-->
    <div class="empower">
      <div class="agree_check">
        <div class="radio-box" v-show="payType === 0" v-for="(item,index) in radios" :key="item.id">
          <span class="radio" :class="{'on':item.isChecked}"></span>
          <input  :value="item.value" class="input-radio" :checked='item.isChecked'  @click="check(item.value)" type="radio">
          <span class="radio_text">{{item.label}}</span>
        </div>
        <div class="check_show" v-show="payType === 1"></div>
        <div class="xie_yi">我已阅读并同意<span @click="goEmpower('use')">《服务使用协议》</span><span @click="goEmpower('hide')">《 隐私协议》</span></div>
      </div>
      <div class="agree_tips">
        <span>温馨提示：尊敬的业主，为保证全体业主的利益和决议得到真实的体现和不被侵害,
				《民法典》规定业主大会必须实名制投票，本人同意使用网络投票表决，填写实名登记号码进行验证。</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .edit_main1 {
    width: 100%;
    padding-top: 40px;
    flex: 1;
    background: #fff;
    .mypopup {
      .mint-popup {
        width: 65%;
        height: 31%;
      }
    }
    // 我的样式
    ul {
      padding: 0 10px;
      .li_li {
        font-size: 1.3em;
        height: 48px;
        line-height: 48px;
        position: relative;
        width: 100%;
        span {
          &.span-color {
            font-size: 1.2rem;
            color: #888;
          }
        }
        img {
          position: absolute;
          right: 0;
          top: 13px;
          width: 9px;
          height: 16px;
        }
        input {
          width: 42%;
          border: none;
          outline: none;
          font-size: 1.2rem;
          color: #888;
          &.code_input {
            width: 30%;
          }
        }
        &.teshu {
          display: flex;
          span {
            flex: 0 0 80px;
          }
          .code_input {
            flex: 1;
            padding: 0;
            height: 47px;
            line-height: 47px;
          }
          .btn {
            flex: 1;
            text-align: center;
          }
        }
      }
    }
    .btn {
      float: right;
      .mint-button {
        font-size: 14px;
        height: 30px;
      }
      .mint-button--primary {
        background-color: #fff;
        border: 1px solid #0078de;
        color: #0078de;
      }
      .mint-button--normal {
        padding: 0 10px;
      }
    }
    .sex-wrapper {
      .mint-cell {
        .mint-cell-wrapper {
          background-size: 100% 1px;
        }
        &:last-child {
          background-size: 100% 0;
        }
      }
    }
    .mysex, .myidentity {
      .ident_ul {
        width: 100%;
        border-radius: 5px;
        .ident_title{
          width: 100%;
          outline: none;
          height: 50px;
          line-height: 50px;
          background: #2585d0;
          color: #ffffff;
          border-bottom: 1px solid #999999;
          font-size: 16px;
          letter-spacing: 3px;
          text-align: center;
        }
        .ident_li {
          border-radius: 5px;
          .ident_btn {
            width: 100%;
            outline: none;
            height: 50px;
            line-height: 50px;
            background: #ffffff;
            color: #292929;
            border-bottom: 1px solid #f1f1f1;
            font-size: 16px;
            letter-spacing: 3px;
            text-align: center;
          }
          .chocebtn {
            background: rgba(37,133,208,0.5);
            color: #ffffff;
          }
        }
      }
      .mint-radiolist {
        .mint-cell {
          &:last-child {
            background-size: 100% 0;
          }
          .mint-cell-wrapper {
            background-size: 100% 0;
          }
        }
      }
    }
    // 弹窗样式
    .mint-popup {
      width: 85%;
      border-radius: 5px;
      .village {
        .p {
          font-size: 15px;
          text-align: center;
          line-height: 39px;
        }
        .plot-wrapper {
          width: 100%;
          padding-top: 40px;
          background: #fff;
          .search {
            width: 100%;
            position: fixed;
            top: 40px;
            left: 0;
            background-color: #fff;
            text-align: center;
            height: 44px;
            line-height: 44px;
            .now-plot {
              padding-left: 10px;
              text-align: left;
              font-size: 15px;
              height: 40px;
              line-height: 40px;
              background-color: #D9D9D9;
            }
            .search-wrapper {
              display: inline-block;
              height: 30px;
              line-height: 30px;
              width: 80%;
              margin: 0 10px;
              border-radius: 4px;
              background-color: #e6e6e6;
              input {
                width: 118px;
                font-size: 14px;
                outline: none;
                border: none;
                background-color: #e6e6e6;
                &::-ms-input-placeholder {
                  text-align: center;
                }
                &::-webkit-input-placeholder {
                  text-align: center;
                }
              }
              .search-icon {
                display: inline-block;
                width: 17px;
                height: 17px;
                background-size: 17px 17px;
                background-repeat: no-repeat;
                @include bgimg('../../components/home/images/search');
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
    .villageHeights {
      width: 100%;
      height: 80%;
      .mint-indexlist {
        height: 78%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .mint-cell-wrapper {
        background-size: 120% 0px;
      }
    }
    .btn_row {
      width: 100%;
      text-align: center;
      padding-bottom: 10px;
      .buttonbg {
        width: 90%;
        height: 44px;
        background: #0078de;
        outline: none;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
      .disabled{
        background: #999999;
      }
    }
    .empower{
      .agree_check{
        display: inline-flex;
        align-items: center;
        margin-left: 10px;
        .radio-box{
          display: inline-block;
          position: relative;
          height: 25px;
          line-height: 25px;
          margin-right: 5px;
          .radio {
            display: inline-block;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            cursor: pointer;
            background-image: url(./images/weitou@2x.png);
            background-repeat: no-repeat;
            //background-position: 0 0;
            background-size: 100% 100%;
          }
          .on {
            background-image: url(./images/yitou@2x.png);
            background-size: 100% 100%;
          }
          .input-radio {
            display: inline-block;
            position: absolute;
            opacity: 0;
            width: 25px;
            height: 25px;
            cursor: pointer;
            left: 0px;
            outline: none;
            -webkit-appearance: none;
          }
          .radio_text{
            font-size: 15px;
            color: #888;
            text-decoration: none;
          }
        }
        .check_show{
          width: 25px;
          height: 25px;
          background-image: url(./images/yitou@2x.png);
          background-repeat: no-repeat;
          //background-position: 0 0;
          background-size: 100% 100%;
          margin-left: 10px;
        }
        .xie_yi{
          font-size: 14px;
          color: #434343;
          margin-left: 5px;
          span{
            text-decoration: underline;
          }
        }
      }
      .agree_tips{
        padding: 10px;
        span{
          font-size: 14px;
          color: #888;
          line-height: 20px;
        }
      }
    }
  }

</style>
<script>
  import headTop from '../header/Header.vue'
  import {
    loadTitle,
    savePhoneName,
    saveTitle,
    saveVillageId,
    // saveRealCuth,
    loadRealCuth
  } from '../../common/js/cache.js'
  import { Toast, Indicator } from 'mint-ui'
  import { getPhoneCode, saveEditData, getMyInfo } from '../../api/my.js'
  import { getVillageLoad, searchKeyword } from '../../api/cityVillage.js'

  export default {
    name: 'EditData1',
    data () {
      return {
        showSex: false,
        showIdentity: false,
        mysex: '',
        myidentity: '',
        phoneNumber: '',
        oldPhone: '',
        codeNumber: '',
        name: '',
        realName: '',
        email: '',
        sexValue: 'Male',
        identityValue: 'User',
        msg: '获取验证码',
        showCode: false,
        repeatNumber: {
          type: Number
        },
        sex: [
          {
            label: '男',
            value: 'Male'
          },
          {
            label: '女',
            value: 'Female'
          },
          {
            label: '保密',
            value: 'Secret'
          }
        ],
        identity: [
          {
            label: '业主',
            value: 'User'
          },
          {
            label: '员工',
            value: 'Work'
          },
          {
            label: '既是业主也是员工',
            value: 'UserWork'
          }
        ],
        village: loadTitle(),
        villageShow: false,
        keyword: '',
        data: {},
        selectword: '',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        errorMsg: '', // 验证码接口返回回来的提示语
        // 实名认证
        payType: '',
        radios: [
          {
            label: '',
            value: '1',
            isChecked: false
          }
        ],
        real_auth: '', // 同意协议书
        dis: false // 防止按钮重复点击（false: 可点击  true：不可点击）
      }
    },
    components: {
      headTop
    },
    created () {
      // 回显编辑资料数据
      this._getEditData()
      console.log(loadRealCuth())
    },
    methods: {
      selectedSex () {
        this.showSex = !this.showSex
      },
      sexValueData () {
        this.showSex = false
      },
      // 身份选择弹窗开启
      selectedIdentity () {
        this.showIdentity = !this.showIdentity
      },
      // 身份选择
      selectIdent (value) {
        this.identityValue = value
        this.showIdentity = false
      },
      goVillage (item) {
        this.village = item.title
        this.villageShow = false
        this.keyword = ''
        saveVillageId(item.id)
        saveTitle(item.title)
      },
      // 获取小区列表
      _getVillage () {
        getVillageLoad().then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      search () {
        searchKeyword(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      toQRCode () {
        this.$router.push('/my/QRCode')
      },
      toMyLabel () {
        this.$router.push('/my/MyLabel')
      },
      goMyVillage () {
        this.villageShow = true
        this.keyword = ''
        this._getVillage()
      },
      //  获取验证码
      getCode () {
        if (this.phoneNumber.length !== 11 && (typeof this.phoneNumber) !== Number) {
          Toast({
            message: '手机号码格式不对',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          getPhoneCode(this.phoneNumber).then(res => {
            this.repeatNumber = res.code
            if (res.code === 400) {
              this.showCode = false
              this.errorMsg = res.error
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              window.clearInterval(interval)
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      // 保存编辑资料
      submitAll () {
        if (this.dis === false) {
          if (!this.realName.length) {
            Toast({
              message: '真实姓名必填',
              position: 'middle',
              duration: 1000
            })
            return
          }
          if (!this.phoneNumber.length) {
            Toast({
              message: '电话号码必填',
              position: 'middle',
              duration: 1000
            })
            return
          }
          if (this.repeatNumber === 400) {
            Toast({
              message: this.errorMsg,
              position: 'middle',
              duration: 1000
            })
            return
          }
          if (!this.real_auth && this.payType === 0) {
            Toast({
              message: '请同意授权协议',
              position: 'middle',
              duration: 1000
            })
            return
          } else if (this.real_auth === '' && this.payType === 1) {
            this.real_auth = this.payType
          }
          this.dis = true
          Indicator.open({
            text: '..保存中..',
            spinnerType: 'fading-circle'
          })
          // if (this.email) {
          //   var reg = new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$')
          //   if (!reg.test(this.email)) {
          //     Toast({
          //       message: '邮箱格式不正确',
          //       position: 'middle',
          //       duration: 1000
          //     })
          //     return
          //   }
          // }
          const phonename = {
            phone: this.phoneNumber,
            name: this.realName
          }
          saveEditData(this.name, this.realName, this.phoneNumber, this.sexValue, this.identityValue, this.codeNumber, this.email, this.real_auth).then(res => {
            if (res.code === 200) {
              Indicator.close()
              savePhoneName(phonename)
              Toast({
                message: res.data,
                position: 'middle',
                duration: 1500
              })
              this.$router.push('/My')
            }
            if (res.code === 400) {
              Indicator.close()
              this.dis = false
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1500
              })
              return
            }
          })
        }
      },
      _getEditData () {
        getMyInfo().then(res => {
          this.name = res.data.name
          this.realName = res.data.real_name
          this.sexValue = res.data.sex
          this.phoneNumber = res.data.phone
          this.oldPhone = res.data.phone
          this.email = res.data.email
          this.identityValue = res.data.wx_role
          this.payType = res.data.real_auth
        })
      },
      editPhone () {
        if (this.phoneNumber === this.oldPhone) {
          this.showCode = false
        } else {
          this.showCode = true
        }
      },
      // 实名认证选择
      check(index) {
        // console.log(index)
        this.real_auth = index // 选中时候的值
        // 显示选中
        this.radios.forEach((item) => {
          item.isChecked = true
        })
      },
      // 实名认证授权书
      goEmpower (item) {
        this.$router.push('/Empower/' + item)
      }
    }
  }
</script>
